<template>
  <div class="condition">
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :msg="tacitly"
          @seek="collect"
          @hand="queryList"
        />
        <el-button size="mini" type="primary" class="btn" @click="queryList">
          {{ $t('btn.search') }}
        </el-button>
        <el-button :disabled="!bomCost('sea:insert')" size="mini" type="primary" style="margin-left: 0" @click="insertSearch">
          {{ $t('btn.add') }}
        </el-button>
        <el-button :disabled="!bomCost('sea:insert')" size="mini" type="success" @click="insertClassify">
          {{ $t('market.AddClass') }}<!--新增分类-->
        </el-button>
      </div>
    </div>
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        get-row-keys="fid"
        serial
        sortable
        expand
      >
        <!--展开行-->
        <template v-slot:expand="props">
          <jc-table
            :table-data="props.scope.details"
            :table-header="detailHeader"
            table-height="auto"
            serial
          >
            <el-table-column :label="$t('market.display')" prop="fdisplay" align="center" />
            <el-table-column :label="$t('market.english')" prop="fenglish" align="center" />
            <el-table-column :label="$t('market.default')" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.fdefault">
                  {{ scope.row.fdefault }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.handle')" align="center">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="defaultSearch(scope.row)"
                >
                  {{ $t('market.default') }}<!--默认-->
                </el-button>
                <el-button
                  type="warning"
                  size="mini"
                  @click="amendSearch(scope.row)"
                >
                  {{ $t('btn.edit') }}<!--修改-->
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleteSearch(scope.row)"
                >
                  {{ $t('btn.del') }}<!--删除-->
                </el-button>
                <el-button
                  size="mini"
                  @click="copy(scope.row)"
                >
                  {{ $t('btn.copy') }}<!--复制-->
                </el-button>
              </template>
            </el-table-column>
          </jc-table>
        </template>
        <template v-slot:btnSlot="col">
          <el-button type="danger" size="mini" @click="delClass(col.scope.row)">{{ $t('shop.delete') }}</el-button>
          <el-button type="warning" size="mini" @click="editClass(col.scope.row)">{{ $t('btn.edit') }}</el-button>
        </template>
      </jc-table>
    </div>
    <div class="footer">
      <jc-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="size"
        @pagination="queryList"
      />
    </div>
    <!--新增/修改-->
    <el-dialog
      v-dialogDrag
      :title="$t('btn.conditions')"
      width="500px"
      :visible.sync="insertSearVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="searForm"
        :model="searForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item :label="$t('market.display')" prop="fdisplay">
          <el-input v-model.trim="searForm.fdisplay" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.fenglish')" prop="fenglish">
          <el-input v-model.trim="searForm.fenglish" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.classType')" prop="ftype">
          <el-select
            v-model.trim="searForm.ftype"
            size="mini"
            filterable
          >
            <el-option
              v-for="(item, index) in regionData"
              :key="index"
              :label="item.fname"
              :value="item.ftype"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="height: 50px !important;">
          <el-button @click="insertSearVisible = false">{{ $t('btn.cancel') }}</el-button>
          <el-button type="primary" @click="insert">{{ $t('btn.confirm') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增分类 -->
    <el-dialog
      v-dialogDrag
      :title="$t('market.AddClass')"
      width="500px"
      :visible.sync="insertClassifyVis"
      :close-on-click-modal="false"
    >
      <el-form
        :model="classify"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item :label="$t('market.classify')" prop="fname">
          <el-input v-model.trim="classify.fname" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.classType')" prop="ftype">
          <el-input-number v-model.trim="classify.ftype" size="mini" />
        </el-form-item>
        <el-form-item style="height: 50px !important;">
          <el-button @click="insertClassifyVis = false">{{ $t('btn.cancel') }}</el-button>
          <el-button type="primary" @click="insertClas">{{ $t('btn.confirm') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import {
  queryTSecUserList,
  insertTJxSearch,
  updateTJxSearch,
  deleteTJxSearch,
  queryJxznType,
  updateDefault,
  insertSearchClas,
  deleteSearch,
  updateSearch
} from '@/api/userAdmin/condition'
export default {
  name: 'Index',
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      ftype: 2052,
      fbillNo: 'fname',
      fname: '',
      total: 0, // 总条目
      pageNum: 1, // 当前页
      size: 200, // 每页显示多少条数据
      tableData: [], // 列表数据
      tableHeight: '73vh',
      dialogClass: '新增分类',
      insertSearVisible: false,
      insertClassifyVis: false, // 新增分类
      regionData: [],
      fid: '',
      searForm: {
        fdisplay: '',
        fenglish: '',
        ftype: ''
      },
      rules: {
        fdisplay: [
          { required: true, message: '请输入查询条件名称', trigger: 'blur' }
        ],
        fenglish: [
          { required: true, message: '请输入查询条件字段', trigger: 'blur' }
        ],
        ftype: [
          { required: true, message: '请选择分类类型', trigger: 'checked' }
        ]
      },
      // 表头数据
      tableHeader: [
        { label: this.$t('market.condition'), prop: 'ftype' },
        { label: this.$t('market.classify'), prop: 'fname' },
        { label: this.$t('market.handle'), type: 'btn', width: '200px' }
      ],
      detailHeader: [],
      classify: {
        fname: '',
        ftype: ''
      }
    }
  },
  created() {
    this.queryList()
    this.queryJxznType()
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 210px)' : '72vh'
  },
  methods: {
    // 列表数据
    async queryList() {
      const DATA = {
        pageNum: this.pageNum,
        pageSize: this.size,
        search: this.searCollData
      }
      const { data: RES } = await queryTSecUserList(DATA)
      this.tableData = RES.array
      this.total = RES.total
    },
    // 分类类型数据(下拉框)
    queryJxznType() {
      queryJxznType().then(res => {
        this.regionData = res.data
      })
    },
    // 新增
    insertSearch() {
      this.fid = ''
      this.insertSearVisible = true
    },
    // 新增/\修改
    insert() {
      this.$refs.searForm.validate(valid => {
        if (!valid) {
          return false
        }
        if (!this.fid) {
          insertTJxSearch({ ...this.searForm }).then(res => {
            if (res.code === 0) {
              this.queryList()
              this.insertSearVisible = false
              this.$message({ showClose: true, message: res.message, type: 'success' })
              Object.keys(this.searForm).forEach(key => {
                this.searForm[key] = ''
              })
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        } else {
          updateTJxSearch({ ...this.searForm, fid: this.fid }).then(res => {
            if (res.code === 0) {
              this.queryList()
              this.insertSearVisible = false
              this.$message({ showClose: true, message: res.message, type: 'success' })
              Object.keys(this.searForm).forEach(key => {
                this.searForm[key] = ''
              })
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 修改
    amendSearch(ev) {
      this.insertSearVisible = true
      this.searForm.fdisplay = ev.fdisplay
      this.searForm.fenglish = ev.fenglish
      this.searForm.ftype = ev.ftype
      this.fid = ev.fid
    },
    copy(ev) {
      this.insertSearVisible = true
      this.searForm.fdisplay = ev.fdisplay
      this.searForm.fenglish = ev.fenglish
    },
    // 默认
    defaultSearch(ev) {
      const DATA = {
        fid: ev.fid,
        ftype: ev.ftype
      }
      updateDefault(DATA).then(res => {
        if (res.code === 0) {
          this.queryList()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除
    deleteSearch(ev) {
      this.$confirm('确定要删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTJxSearch({ fid: ev.fid }).then(res => {
          if (res.code === 0) {
            this.queryList()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 新增分类 弹窗
    insertClassify() {
      this.classify.fname = ''
      this.classify.ftype = ''
      this.classify.fid = ''
      this.insertClassifyVis = true
      this.dialogClass = '新增分类'
    },
    // 新增分类
    insertClas() {
      if (!this.classify.fid) {
        insertSearchClas({ ...this.classify }).then(res => {
          if (res.code === 0) {
            this.queryJxznType()
            this.insertClassifyVis = false
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            })
          }
        })
      } else {
        const DATA = {
          fid: this.classify.fid,
          fname: this.classify.fname
        }
        updateSearch(DATA).then(res => {
          if (res.code === 0) {
            this.queryList()
            this.insertClassifyVis = false
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            })
          }
        })
      }
    },
    // 修改
    editClass(ev) {
      this.classify.fname = ev.fname
      this.classify.ftype = ev.ftype
      this.classify.fid = ev.fid
      this.insertClassifyVis = true
      this.dialogClass = '修改分类'
    },
    // 删除
    delClass(ev) {
      this.$confirm('确定要删除分类么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSearch({ fid: ev.fid, ftype: ev.ftype }).then(res => {
          if (res.code === 0) {
            this.queryList()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scope>
.condition {
  @include listBom;
  .el-table>.el-table::v-deep td {
    padding: 5px 0;
  }
  .header {
    position: relative;
    .header-name {
      width: 100%;
    }
    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
}
</style>
